@import "common.scss";

@function getvw($w) {
    @return($w/750)*100+vw
}

;

* {
    margin: 0;
    padding: 0;
}




.wrap{
    header{
    .top{
        height: getvw(100);
    }
    nav{
        width: getvw(750);
        display: flex;
        padding: getvw(17) getvw(23) getvw(9) getvw(23);
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        background-color: white;
        z-index: 999;
        box-sizing: border-box;
        button{
            width: getvw(123);
            height: getvw(57);
            background-color: white;
            border-radius: getvw(20);
            border: 1px solid #ff9344;
        }
        p{
            font-size: getvw(25);
        }
        div{
            width: getvw(123);
            text-align: right;
            position: relative;
            i{
            font-size: getvw(65);
        }
        div{
            width: getvw(40);
            height: getvw(40);
            line-height: getvw(40);
            background-color: red;
            color: white;
            border-radius: 50%;
            position: absolute;
            top: getvw(-5);
            right: getvw(-5);
            text-align: center;
        }
        }
        
    }
}
.user{
    display: flex;
    justify-content: space-around;
    .user-left{
        width: getvw(170);
        height: getvw(170);
        img{
            width: 100%;
            border-radius: 50%;
        }
    }
    .user-center{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: getvw(400);
        span:nth-of-type(1){
            font-size: getvw(30);
        }
        span:nth-of-type(2){
            font-size: getvw(26);
            color: gray;
        }
    }
    .user-right{
        width: getvw(100);
        i{
            text-align: center;
        font-size: getvw(100);
        line-height: getvw(170);
        }
        
    }
}
.user-bottom{
    display: flex;
    justify-content: space-around;
    margin-top: getvw(30);
    div{
        width: getvw(195);
        height: getvw(151);
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        i{
            font-size: getvw(71);
            color: white;
        }
    }
    .user-bottom1{
        background-color: skyblue;
    }
    .user-bottom2{
        background-color: green;
    }
    .user-bottom3{
        background-color: brown;
    }
}
.mymoney{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: getvw(30) 0;
    div:nth-of-type(1){
        width: getvw(450);
        display: flex;
        align-items: center;
        i{
            font-size: getvw(100);
            color:yellowgreen;
            margin-right: getvw(20);
        }
        span{
            width: getvw(250);
        }
    }
    div:nth-of-type(2){
        i{
            color: #ff9344;
        }
    }
    
}
.bb{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: getvw(30) 0;
    div:nth-of-type(1){
        width: getvw(450);
        display: flex;
        align-items: center;
        i{
            font-size: getvw(80);
            color:yellow;
            margin-right: getvw(40);
        }
        span{
            width: getvw(250);
        }
    }
    div:nth-of-type(2){
        i{
            color: #ff9344;
        }
    }
}
.findfriend{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: getvw(30) 0;
    div:nth-of-type(1){
        width: getvw(450);
        display: flex;
        align-items: center;
        i{
            font-size: getvw(100);
            color:red;
            margin-right: getvw(20);
        }
        span{
            width: getvw(250);
        }
    }
    div:nth-of-type(2){
        i{
            color: #ff9344;
        }
    }
}
.myfoot{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: getvw(30) 0;
    div:nth-of-type(1){
        width: getvw(450);
        display: flex;
        align-items: center;
        i{
            font-size: getvw(100);
            color:pink;
            margin-right: getvw(20);
        }
        span{
            width: getvw(250);
        }
    }
    div:nth-of-type(2){
        i{
            color: #ff9344;
        }
    }
}
.change{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: getvw(30) 0;
    div:nth-of-type(1){
        width: getvw(450);
        display: flex;
        align-items: center;
        i{
            font-size: getvw(100);
            color:skyblue;
            margin-right: getvw(20);
        }
        span{
            width: getvw(250);
        }
    }
    div:nth-of-type(2){
        i{
            color: #ff9344;
        }
    }
}
.callme{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: getvw(30) 0;
    div:nth-of-type(1){
        width: getvw(450);
        display: flex;
        align-items: center;
        i{
            font-size: getvw(100);
            color:saddlebrown;
            margin-right: getvw(20);
        }
        span{
            width: getvw(250);
        }
    }
    div:nth-of-type(2){
        i{
            color: #ff9344;
        }
    }
}
.btn{
    display: flex;
    justify-content: space-around;
    padding-top: getvw(20);
    button{
        width: getvw(147);
        height: getvw(76);
        background-color: #ff9344;
        border-radius: getvw(40);
        border: none;
        color: white;
    }
}
footer{
    ul{
    //     li:nth-of-type(3) i{
    //         font-size: getvw(80);
    //    }
        li:nth-of-type(4) i{
             color: #ff9344;
        }
    }
}
}
